Description

This PR improves our current Fast Refresh integration. Instead of completely disabling the overlay for the ReactRefreshWebpackPlugin we now pass a custom module and rely on the whm integration. We also needed to vendor webpack-hot-middleware.

List of changes made:

• GraphQL errors (handled in error-overlay-handler) are also pushed to our new overlay now
• Instead of directly relying on mitt we push to a queue in window._gatsbyEvents because sometimes we need actions before React rehydrated and mitt was too late for that then
• Rewrite the frontend code (inside cache-dir/fast-refresh-overlay) to use named exports, more modular components
• Adapted components and code to account for new Webpack 5 shape + changed the sourcing for source-maps. compilation.codeGenerationResults inside start-server.ts
• Use an Accordion to display multiple runtime/graphql errors
• Add helpers to lock the body and trap focus
• Rewrite the fast-refresh-overlay/index.js to use a reducer for its state logic
• Use a custom fast-refresh-module for the module option and expose all expected options

Documentation

In case we have pages where we show an error overlay screenshot, those would need to be updated.

Testing

In case you want to test it, here's a src/pages/index.js file I used for development.

import React from "react"
import { graphql } from 'gatsby'

// Compile error: Remove the } from ({ data })
const IndexPage = ({ data }) => {
  // Multiple runtime errors
  // React.useEffect(() => {
  //   setTimeout(() => {
  //     window.blabla()
  //   }, 100)

  //   setTimeout(() => {
  //     window.blabla2()
  //   }, 150)
  // })

  // Runtime error
  // const foo = null;foo.bar = 'bar'

  return (
    <main>
      <div>
        Hello
      </div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  )
}

export default IndexPage

/*
Possible changes to GraphQL query:
siteMetadata {
  title2
  test
}

Or

site {
  buildTime(format: "ASDF")
}
*/

export const query = graphql`
  {
    site {
      buildTime
      siteMetadata {
        title
      }
    }
  }
`

Related Issues

Initial integration: #26664

[ch25595]
[ch25647]
[ch19583]
[ch25648]